<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="info">
			<view class="info-title">
				<p>{{data.title}}</p>
			</view>
			<view class="info-meta">
				<view>供稿人：{{data.contributor}}</view>
				<view>编辑：{{data.compile}}</view>
				<view>复审：{{data.rechek}}</view>
				<view>终审：{{data.finalChek}}</view>
				<view>发布时间：{{$u.timeFormat(data.createTime, 'yyyy-mm-dd hh:MM')}}</view>
			</view>
			<view class="info-content">
				<view>
					<u-parse :html="data.content"></u-parse>
				</view>
			</view>
			<view class="info-to-more">
				<p @click="toMore">-->查看更多资讯</p>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				title: "资讯详情",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				data:{},
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    // console.log(option.imtId); //打印出上个页面传递的参数。
			this.initData(option.imtId);
		},
		methods: {
			toMore(){
				uni.redirectTo({
				    url: '/pages/information/list'
				});
			},
			initData(imtId) {
				Vue.prototype.$u.api.getDetailByImtId({
					imtId:imtId
				}).then(res => {
					this.data = res;
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background-color: #fff;
	}
	
	.info {
		padding: 30rpx;
	}
	
	.info-title {
		text-align: center;
		margin-bottom: 15rpx;
	}
	.info-title > p {
		font-weight: bold;
		text-align: left;
		font-size: 32rpx;
		display: inline-block;
	}
	.info-meta {
		color: #9f9f9f;
		margin-bottom: 20rpx;
		border: 1rpx dashed #cccccc;
		padding: 20rpx 0;
		text-align: center;
	}
	.info-meta > view{
		padding-left: 15rpx;
		display: inline-block;
	}
	// .info-content {
	// 	text-align: center;
	// }
	// .info-content > view{
	// 	text-align: left;
	// 	display: inline-block;
	// }
	.info-to-more{
		margin-top: 15rpx;
		text-align: right;
		color: blue;
		text-decoration: underline;
	}
	
</style>
